<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 aPosition; // 位置坐标
      attribute vec4 aColor; // 颜色坐标
      varying vec4 vColor; // 颜色变量
      void main() {
        gl_Position = vec4(aPosition, 0.0, 1.0);
        gl_PointSize = 10.0; // 设置点的大小
        vColor = aColor; // 设置颜色
      }
    </script>

    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      precision highp float; // 设置精度
      varying vec4 vColor; // 颜色变量
      void main() {
        gl_FragColor = vColor; // 使用颜色变量
      }
    </script>
    <script type="module">
      import initShaders from "../utils/initShader.js";

      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");
      if (!gl) {
        console.error("WebGL not supported");
      }

      const program = initShaders(gl);
      /*
        [
          -1.0, 1.0, // 第一个顶点坐标
          1.0, 0.0, 0.0, 1.0, // 红色
          -0.5, -1.0, // 第二个顶点坐标
          0.0, 1.0, 0.0, 1.0, // 绿色
          -0.5, 1.0, // 第三个顶点坐标
          0.0, 0.0, 1.0, 1.0, // 蓝色
          0.0, -1.0, // 第四个顶点坐标
          1.0, 0.0, 0.0, 1.0, // 红色
          0.0, 1.0, // 第五个顶点坐标
          0.0, 1.0, 0.0, 1.0, // 绿色
          0.5, -1.0, // 第六个顶点坐标
          0.0, 0.0, 1.0, 1.0, // 蓝色
        ]
      */
      const vertices = new Float32Array([
        // 位置坐标 颜色坐标
        -1.0,
        1.0, // 第一个顶点坐标
        1.0,
        0.0,
        0.0,
        1.0, // 红色
        -0.5,
        -1.0, // 第二个顶点坐标
        0.0,
        1.0,
        0.0,
        1.0, // 绿色
        -0.5,
        1.0, // 第三个顶点坐标
        0.0,
        0.0,
        1.0,
        1.0, // 蓝色
        0.0,
        -1.0, // 第四个顶点坐标
        1.0,
        0.0,
        0.0,
        1.0, // 红色
        0.0,
        1.0, // 第五个顶点坐标
        0.0,
        1.0,
        0.0,
        1.0, // 绿色
        0.5,
        -1.0, // 第六个顶点坐标
        0.0,
        0.0,
        1.0,
        1.0, // 蓝色
      ]);
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      // 获取变量的索引
      const aPosition = gl.getAttribLocation(program, "aPosition");
      const aColor = gl.getAttribLocation(program, "aColor");

      gl.vertexAttribPointer(
        aPosition,
        2,
        gl.FLOAT,
        false,
        6 * Float32Array.BYTES_PER_ELEMENT,
        0
      );
      gl.enableVertexAttribArray(aPosition); // 启用位置坐标

      // 颜色坐标
      gl.vertexAttribPointer(
        aColor,
        4,
        gl.FLOAT,
        false,
        6 * Float32Array.BYTES_PER_ELEMENT,
        2 * Float32Array.BYTES_PER_ELEMENT
      );
      gl.enableVertexAttribArray(aColor); // 启用颜色坐标

      // 绘制点
      gl.drawArrays(gl.POINTS, 0, 6);
      // 绘制线段,两两连接
      // gl.drawArrays(gl.LINES, 0, 6);
      // 绘制一系列连接的线段
      // gl.drawArrays(gl.LINE_STRIP, 0, 6);
      // 绘制一个封闭的线段
      // gl.drawArrays(gl.LINE_LOOP, 0, 6);
      //绘制三角形
      // gl.drawArrays(gl.TRIANGLES, 0, 6); // 绘制两个三角形
      // 绘制三角形带
      // gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6);
      // 绘制三角形扇形
      gl.drawArrays(gl.TRIANGLE_FAN, 0, 6);
    </script>
  </body>
</html>
